<template>
  <base-window size="larger" :unique="false" class-name="agenda-common" :show.sync="dialogFormVisible" :title="title" @closed="reset">
    <div class="schedule-content" v-loading="addLoading" >
      <div class="schedule-scroll-content" v-if="showEnable">
        <el-form ref="formRef" :model="form" label-position="top" size="mini">

          <el-form-item :label="$t('calendar.detail.agendaTitle')" required>
            <el-input type="textarea" v-model="form.name" :placeholder="$t('calendar.placeHolder.agendaTitleText')"></el-input>
          </el-form-item>

          <el-form-item prop="descr" :label="$t('calendar.detail.agendaDesc')">
            <el-input type="textarea" v-model="form.descr" :placeholder="$t('calendar.placeHolder.agendaDescText')"></el-input>
          </el-form-item>
          
          <el-form-item :label="$t('common.form.type.planStartTime')" required>
            <vc-date-picker-ipt type="startTime" :repreat-type="form.repeatType" :time="form.endTime" :val-time="form.startTime" @change="startTimeChange"></vc-date-picker-ipt>
          
            <!-- <el-date-picker type="datetime" placeholder="选择计划开始时间" v-model="form.startTime" @change="startTimeChange" value-format="yyyy-MM-dd HH:mm:ss" :picker-options="datePickerOption" :clearable="false" :editable="false"></el-date-picker> -->
          </el-form-item>

          <!-- <el-form-item label="计划开始时间">
            <el-col :span="13">
              <el-date-picker :clearable="false" type="date" placeholder="选择日期" v-model="form.startDay" style="width: 100%;"></el-date-picker>
            </el-col>
            <el-col class="line" :span="1">-</el-col>
            <el-col :span="10">
              <el-time-select :clearable="false" :picker-options="pickerOptions" placeholder="选择时间" v-model="form.startMinute" style="width: 100%;"></el-time-select>
            </el-col>
          </el-form-item> -->

          <el-form-item :label="$t('common.form.type.planEndTime')" required>
            <vc-date-picker-ipt type="endTime" :repreat-type="form.repeatType" :time="form.startTime" :val-time="form.endTime" @change="endTimeChange"></vc-date-picker-ipt>

            <!-- <el-date-picker type="datetime" placeholder="选择计划完成时间" v-model="form.endTime" @change="endTimeChange" value-format="yyyy-MM-dd HH:mm:ss" :picker-options="datePickerOption" :clearable="false" :editable="false"></el-date-picker> -->
          </el-form-item>

          <el-form-item :label="$t('calendar.detail.participants')">
            <div v-if="form.users.length > 0" class="user-tag" :class="{'disabled-tag': isAddUser}" @click="selectApproveUser">
              <!-- 第一个tag展示创建人 -->
              <template v-for="item in formUsersList">
                <el-tag
                  :key="item.userId"
                  size='mini'
                  :closable="item.userId != loginUser.userId || (agendaId && !canDelUser) ? true : false"
                  disable-transitions
                  type='info'
                  @close="handleClose(item)">
                  <template v-if="isOpenData && item.staffId">
                    <open-data :openid="item.staffId"></open-data>
                  </template>
                  <template v-else>
                    <img :src="head(item.head)" alt="">
                    <span>{{item.displayName || item.userName}}</span>
                  </template> 
                </el-tag>
              </template>
              <el-button v-if="!isAddUser" class="button-new-tag" icon="el-icon-plus" size="small">&nbsp;&nbsp;{{$t('calendar.detail.addPeople')}}</el-button>
              <!-- <div v-if="form.users.length > 2" class='biz-team-select-tags'>
                <div class='biz-team-select-tag'>+{{form.users.length - 2}}</div>
              </div> -->
            </div>
            <div v-else class="user-tag" @click="selectApproveUser">
              <span class="placeholder">&nbsp;&nbsp;{{$t('calendar.placeHolder.selectPersonText')}}</span>
            </div>
            <div class="user-tag-tips" v-if="isAddUser">
              {{$t('calendar.tips.authTip')}}
            </div>
          </el-form-item>

          <el-form-item :label="$t('common.base.scheduleReminder')" prop="minutes">
            <div class="notice-type">
              <template v-if="form.minutes > 0">
                <el-select v-model="form.noticeType" style="margin-right: 10px;">
                  <el-option :label="$t('calendar.detail.beforeStart')" value="1"></el-option>
                  <el-option :label="$t('calendar.detail.beforeEnd')" value="2"></el-option>
                </el-select>
              </template>
              <el-select v-model="form.minutes">
                <el-option :label="$t('calendar.detail.noMind')" value="0"></el-option>
                <el-option :label="$t('calendar.detail.minute', {num1: '5'})" value="5"></el-option>
                <el-option :label="$t('calendar.detail.minute', {num1: '15'})" value="15"></el-option>
                <el-option :label="$t('calendar.detail.minute', {num1: '30'})" value="30"></el-option>
                <el-option :label="$t('calendar.detail.hour', {num1: '1'})" value="60"></el-option>
              </el-select>
            </div>
          </el-form-item>
  
          <el-form-item v-if="form.minutes > 0" label="" prop="noticeContent">
            <!-- <el-input type="textarea" v-model="form.noticeContent" placeholder="请输入提醒内容"></el-input> -->
            <biz-at-textarea class="biz-at-textarea" ref="atTextarea" search-url="/message/user/lists" name-key="displayName" v-model="form.noticeContent" :at-users.sync="atUsers">
              <template slot="item" slot-scope="item">
                <img :src="head(item.user.head)">
                <span>{{item.user.displayName}}</span>
              </template>
              <textarea ref="editor" class="base-at-textarea" @input="inputContent" :placeholder="$t('calendar.placeHolder.remindText')" maxlength="500" :rows="3"></textarea>
            </biz-at-textarea>
          </el-form-item>

          <!-- <el-form-item>
            <el-checkbox v-model="form.acceptNotice" :true-label="1" :false-label="0">成员接受日程通知我</el-checkbox>
            <el-checkbox v-model="form.refuseNotice" :true-label="1" :false-label="0">成员拒绝日程通知我</el-checkbox>
          </el-form-item> -->

          <el-form-item :label="$t('calendar.detail.createRepeat')" prop="repeatType">
            <el-select @change="selectChange" v-model="form.repeatType">
              <el-option :label="$t('common.base.notRepeat')" value="0"></el-option>
              <el-option :label="$t('calendar.detail.repeatEveryDay')" value="1"></el-option>
              <el-option :label="$t('calendar.detail.repeatEveryWeek')" value="2"></el-option>
              <el-option :label="$t('calendar.detail.repeatEveryMonth')" value="3"></el-option>
              <el-option :label="$t('calendar.detail.repeatEveryYear')" value="4"></el-option>
            </el-select>
          </el-form-item>
          
        </el-form>
      </div>
      <div class="schedule-scroll-content" v-if="showEnable">
            
        <div class="users-time">
          <div class="clash">
            <!-- <p class="clash-tip">-->
            <!-- <i v-if="clashCount" class="iconfont icon-jinggao"></i> 
              <i v-else class="iconfont icon-yitongguo"></i> 
              {{clashCount ? `${clashCount}人日程有冲突` : '暂无日程冲突'}} -->
            <!--</p> -->
            <div class="type-desc">
              <div class="plane-type"></div>
              <div class="plane-content time-text">{{$t('common.form.type.planTime')}}</div>
              <div class="busy-type"></div>
              <div class="plane-content time-text">{{$t('calendar.detail.busyTime')}}</div>
              <div class="config-type"></div>
              <div class="time-text">{{$t('calendar.detail.conflictTime')}}</div>
            </div>
            <div class="clash-right">
              <!-- <el-select v-model="clashType" placeholder="冲突类型" clearable>
                <el-option label="完全冲突 " :value="1"></el-option>
                <el-option label="完全不冲突" :value="2"></el-option>
                <el-option label="部分冲突 " :value="3"></el-option>
              </el-select> -->
              <el-select class="work-state"
                         v-model="statusList"
                         multiple
                         collapse-tags
                         :placeholder="$t('common.base.workState')">
                <el-option
                  v-for="item in userStateList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                  <div class="schedule-work-state-item">
                    <span class="state-color-icon" :style="{backgroundColor: item.color}"></span>
                    <span>{{item.label}}</span>
                  </div>
                </el-option>
              </el-select>
              <el-button v-if="!isAddUser" class="bnt-add-user" @click="selectApproveUser" type="primary" plain icon="el-icon-plus" size="mini">{{$t('calendar.detail.addPeople')}}</el-button>
            </div>
          </div>
          <div class="container" v-if="form.endTime">
            <gantt-chart
              :gantt-data="GanttData"
              :time-section="GanttTime"
              :chart-max-height="ChartHeight"/>

            <div v-if="theMaskFlag" class="the-mask-box">
              {{$t('calendar.limit.remarkLimit', {num1: '50'})}}
            </div>
          </div> 

        </div> 
      </div>



    </div>

    <div slot="footer" class="dialog-footer" v-if="showEnable">
      <el-button @click="dialogFormVisible = false">{{$t('common.base.close')}}</el-button>
      <el-button type="primary" @click="submit" :disabled="pending">{{$t('common.base.save')}}</el-button>
    </div>

    <!-- todo 解决form.users被监听 -->
    <span style="opacity: 0;">{{ ElFormKey }}</span>
  </base-window>

</template>

<script>
import { isAllotByDepartment, isOpenData } from '@src/util/platform'
import _ from 'lodash';
import moment from 'moment'
import { getRootWindow } from '@src/util/dom'
import { getPlanEndTime, getTimestamp, cutAtTextContent } from 'pub-bbx-utils';  
import { getStateColorMap } from '@src/api/SettingApi'
import * as CalendarApi from '@src/api/CalendarApi.ts'
import { getOssUrl } from '@src/util/assets'
const defaultAvatar = getOssUrl('/avatar.png')

// component
import VcDatePickerIpt from './vc-date-picker-ipt/VcDatePickerIpt'
import {enCodeAtText, atTextToUsers} from '@src/util/atText'
import { useTenantId, useRootUser } from '@hooks/useRootWindow.ts';
import { safeNewDate } from '@src/util/time';

/* api */
import { getSelectDepartmentCalendarUserList } from '@src/component/common/BaseSelectUser/api'
import { BaseSelectUserModeEnum } from '@src/component/common/BaseSelectUser/model/enum'

let startTime, endTime;
export default {
  name: 'agenda-dailog',
  inject:['initData'],
  props: {
    startTime: {
      type: String,
      default: ''
    },
    endTime: {
      type: String,
      default: ''
    },
    planTimeConfig: {
      type: Number,
      default: 30
    },
    canBaseCalendarAddUser: {
      type: Boolean,
      default: true
    }
  },
  components:{
    [VcDatePickerIpt.name]: VcDatePickerIpt
  },
  data() {
    return {
      isOpenData,
      pending: false,
      dialogFormVisible: false,
      title: this.$t('calendar.detail.createcommonAgenda'),
      agendaId: '', 
      form: {
        name: '',
        type: 3,
        startDay: '',
        startMinute: '',

        startTime: '',
        endTime: '',
        descr: '',
        isRepeat: 0,
        repeatType: '0',
        acceptNotice: 0,
        refuseNotice: 0,
        noticeType: '1',
        noticeContent: '',
        minutes: '0',
        users:[]
      },
      pickerOptions: {
        start: '00:00',
        step: '00:15',
        end: '23:45'
      },
      tableData: [],
      columns: [],
      clashType: '',
      statusList:[],
      userStateList: [],
      clashCount: 0,

      GanttData: [],
      GanttCurrentTime: safeNewDate().getTime(),
      ChartHeight: 600,

      datePickerOption: {
        disabledDate(time) {
          return time.getTime() < safeNewDate(safeNewDate().toLocaleDateString()).getTime();
        },
      },
      ElFormKey: 1,
      formUsersList: [],
      addLoading: false,
      showEnable: false,
      theMaskFlag: false,
      atUsers:[]
    }
  },
  computed: {
    loginUser(){
      return this.initData.loginUser 
    },
    selectUsers(){
      return this.form.users || [];
    },
    GanttTime(){
      // 时间轴以计划开始时间和完成时间  
      return [moment(this.form.startTime).format('YYYY/MM/DD HH:mm'), moment(this.form.endTime).format('YYYY/MM/DD HH:mm')]
    },
    canAddUser(){
      return this.form.canAddUser
    },
    canDelUser(){
      return this.form.canDelUser
    },
    participantUsersList(){
      const length = this.formUsersList.length;
      if(length >= 2){
        return this.formUsersList.slice(0, 2);
      }else if(length >= 1) {
        return this.formUsersList.slice(0, 1);
      }
      return [];
    },
    canBaseCalendarAdd(){
      return this.initData.canBaseCalendarAddUser;
    },
    isAddUser(){
      return !this.canBaseCalendarAdd || (this.agendaId && !this.canAddUser);
    },
    // 判断是否钉钉端
    tenantType() {
      let tenantType = localStorage.getItem('tenantType') || '';
      return tenantType == 0; 
    },
    computeTime(){
      let time = safeNewDate(this.form.endTime).getTime() - safeNewDate(this.form.startTime).getTime();
      
      return (1000 * 60 * 60 * 24) < time;
    }
  },
  watch: {
    startTime: {
      immediate: true,
      handler() {
        // console.info('selectstartTime::', this.startTime);
        if(this.startTime) {
          // 日程开始和结束时间
          this.form.startTime = this.startTime
          this.form.endTime = this.endTime
          startTime = this.form.startTime
          endTime = this.form.endTime
          this.getClashUserTime() 
        }
      }
    },
    // todo 代替监听selectUsers来更新视图
    ElFormKey: {
      handler() {
        if(this.form.users.length) {
          this.getClashUserTime();
          this.formUsersList = this.form.users;
        }
      }
    },
    selectUsers: {
      deep: true,
      handler() {
        if(this.form.users.length) {
          this.updataKey();
          this.formUsersList = this.form.users;
        }
      }
    },
    clashType:{
      handler() {
        this.getClashUserTime() 
      }
    },
    statusList:{
      handler() {
        this.getClashUserTime() 
      }
    }
  },
  mounted () {  
    this.form.users.push(this.loginUser);
    // 初始化工作状态和颜色
    this.initWorkState()
  },
  methods: {
    head(src){
      if(!src) return defaultAvatar;
      return src;
    },
    startTimeChange(e){
      this.form.startTime = e;
      this.form.endTime = getPlanEndTime(this.planTimeConfig, e)
      startTime = e;
      this.getClashUserTime() 
    },
    endTimeChange(e){
      this.form.endTime = e;
      endTime = e;
      this.getClashUserTime() 
    },
    getClashUserTime: _.debounce(function () {
      if(this.dialogFormVisible && this.form.startTime && this.form.endTime && this.form.users.length) {
        this.getAgendaUsersTime()
        // this.getAgendaUsersTimeNum()
      }
    }, 500),
    initWorkState(){
      getStateColorMap().then(res => {      
        let list = []
        let userStateMap = {}
        try {
          let rootWindow = getRootWindow(window)
          let initData = JSON.parse(rootWindow?._init || '{}')
          userStateMap = initData.userStateMap
        } catch (error) {
          userStateMap = {}
          console.error('error', error)
        }
        for (let userStateKey in userStateMap) {
          let userState = {
            key: userStateKey,
            value: userStateKey,
            label: userStateKey,
            color: res[userStateKey]
          }
          list.push(userState)
        }
        this.userStateList = list
      })
    },
    async getAgendaUsersTime(){
      if(this.form.users.length > 50){
        // 冲突最多显示50人，但是页面还是需要显示的
        this.showEnable = true;
        this.theMaskFlag = true;
        return
      }
      this.theMaskFlag = false;

      try {
        this.addLoading = true;
        const params = {};
        params.startTime = new Date(this.form.startTime).getTime()
        params.endTime = new Date(this.form.endTime).getTime()
        params.userIds = this.form.users.map(item=>item.userId)
        params.clashType = this.clashType
        params.statusList = this.statusList
        params.agendaId = this.agendaId
        const res = await CalendarApi.getAgendaUsersTime(params);
        if(res.status != 0) {
          return this.$platform.notification({
            title: res.message,
            type: 'error'
          });
        }
        this.GanttData = res.data?.list || []
      } catch (err) {
        console.error('err', err);
      }
      this.$nextTick(() => {
        this.addLoading = false;
        this.showEnable = true;
      })
    },
    async getAgendaUsersTimeNum(){
      if(!this.form.users.length) return
      try {
        const params = {};
        params.startTime = this.form.startTime
        params.endTime = this.form.endTime
        params.userIds = this.form.users.map(item=>item.userId)
        params.clashType = this.clashType
        params.statusList = this.statusList
        const res = await CalendarApi.getAgendaUsersTimeNum(params);
        if(res.status != 0) {
          return this.$platform.notification({
            title: res.message,
            type: 'error'
          });
        }
        this.clashCount = res.data || 0
      } catch (err) {
        console.error('err', err);
      }
    },
    show(agendaId) {
      this.showEnable = false;
      if(this.startTime) {
        // 日程开始和结束时间
        this.form.startTime = this.startTime
        this.form.endTime = this.endTime
        startTime = this.form.startTime
        endTime = this.form.endTime
        this.getClashUserTime() 
      }
      if(agendaId) {
        this.title = this.$t('calendar.detail.editcommonAgenda');
        this.agendaId = agendaId
        this.getAgendaInfo(agendaId)
      } else {
        this.title = this.$t('calendar.detail.createcommonAgenda')
        this.agendaId = ''
      }
      this.dialogFormVisible = true
    },
    resetPending(){
      this.pending = false
    },
    close() {
      this.pending = false
      this.dialogFormVisible = false
      this.reset()
    },
    reset(){
      this.pending = false
      this.$refs.formRef.resetFields()
      this.agendaId = ''
      this.form.name = '';
      this.form.descr = ''
      this.title = this.$t('calendar.detail.createcommonAgenda')
      this.form.users = [this.loginUser]
      this.GanttData = []
      this.clashCount = 0
      this.form.acceptNotice = 0
      this.form.refuseNotice = 0
      this.clashType = ''
      this.statusList = []
      this.theMaskFlag = false;
      this.updataKey();
    },
    handleClose(user) {
      this.form.users.splice(this.form.users.indexOf(user), 1);
      this.updataKey();
    },
    
    async selectApproveUser(){
      // 判断编辑日程时候没有添加人员权限
      if(this.isAddUser) return;
      let selected = this.form.users.length > 0 && this.form.users.map(x=>{
        return {
          displayName: x.userName || x.displayName,
          head: x.userHead || x.head,
          userId: x.userId,
          staffId: x.staffId
        }
      });
      const loginUser = selected.filter(item=>item.userId == this.loginUser.userId) ;

      let flag = isAllotByDepartment()
      
      let options = {
        title: this.$t('calendar.detail.selectParticipants'), // [选填] 默认值为 '请选择人员'
        max: -1, // [选填]最大人数：当值小于等于0或者不填时，不对选择人数做限制，max值为1时单选，大于1时多选
        selected, // [选填] 已选人员 每个人员必须包括userId,displayName,staffId,head这四个属性，只有带max大于1时生效
        unique: false,
        mode: BaseSelectUserModeEnum.Filter,
        // haveRole: true,
        // canDel: this.agendaId && !this.canAddUser,
        // isCalendar: true,
        // calendarAction: `/calendar/add/user/tree?allotByTag=${!flag}`,
        // calendarSeeAllOrg: !flag,
        fetchDepartmentList: (params) => {
          
          const newParams = {
            ...params,
            allotByTag: !flag
          }
          
          return getSelectDepartmentCalendarUserList(newParams)
        }
      }
      
      console.log('canDel', this.agendaId && !this.canAddUser);
      
      /* FIXME: 选人组件 */
      this.$fast.select.multi.user(options)
        .then((res) => {
          if (res.status != 0 || !res.data) return;
          let list = res.data.users || []

          list = list.filter(item=>item.userId != this.loginUser.userId);
          this.form.users = loginUser.concat(list);
          this.updataKey();
        })
        .catch((err) => {
          console.warn(err)
        })
    },
    // todo 更新this.form.users（烂方法 有好方法的话请大佬替换
    updataKey(){
      this.ElFormKey = Math.random() * 1000000;
    },
    submit() {
      if(this.pending) return;
      try {
        this.form.startTime = getTimestamp(this.form.startTime)
        this.form.endTime = getTimestamp(this.form.endTime)
        // if(safeNewDate(this.form.startTime).getTime() == safeNewDate(this.form.endTime).getTime()) {
        //   return this.$platform.notification({
        //     title: '计划开始时间不能和计划完成时间相同',
        //     type: 'error'
        //   });
        // }
        if(this.form.startTime > this.form.endTime) {
          return this.$platform.notification({
            title: this.$t('calendar.limit.timeLimit'),
            type: 'error'
          });
        }
        // if(safeNewDate(this.form.startTime).getTime() < safeNewDate().getTime()) {
        //   return this.$platform.notification({
        //     title: '计划开始时间不能早于现在',
        //     type: 'error'
        //   });
        // }
        if(!this.form.name.trim()){
          return this.$platform.notification({
            title: this.$t('calendar.placeHolder.agendaTitleText'),
            type: 'error'
          }); 
        }
        if(this.form.name.trim().length > 100) return this.$platform.notification({
          title: this.$t('calendar.limit.titleLimit', {num1: '100'}),
          type: 'error'
        }); 
        if(this.form.noticeContent.trim().length > 150) return this.$platform.notification({
          title: this.$t('calendar.limit.remidLimit', {num1: '150'}),
          type: 'error'
        }); 
        if(this.form.descr.trim().length > 1000) return this.$platform.notification({
          title: this.$t('calendar.limit.descLimit', {num1: '1000'}),
          type: 'error'
        }); 
        if(this.form.users.length <= 0) return this.$platform.notification({
          title: this.$t('calendar.placeHolder.selectPersonText'),
          type: 'error'
        }); 
        if(this.agendaId) {
          // 编辑
          this.form.id = this.agendaId;
        } else {
          delete this.form.id 
        }
        // if(this.form.minutes == 0) {
        //   // 无提醒
        //   this.form.noticeType = 0
        //   this.form.noticeContent = ''
        // }
        this.form.isRepeat = this.form.repeatType > 0 ? 1 : 0;

        let form = _.cloneDeep(this.form)
        form.noticeContent = enCodeAtText(form.noticeContent, this.atUsers);
        let receivers = []
        this.atUsers.forEach(item=>{
          if(this.form.noticeContent.indexOf(`${item.displayName} `) > -1){
            receivers.push(item.userId)
          }
        })
        form.receivers = receivers.join(',')    
        let query = ''
        if(this.atUsers.length > 0){
          let queryData = {
            receivers:form.receivers,
            tenantId: useTenantId().value,
            content: cutAtTextContent(form.noticeContent),
            sendUserName: useRootUser()?.value.displayName,
            bizId: this.agendaId,
            bizNo: this.form.name,
            md: this.$t('common.schedule.title'),
            createTime:this.form.startTime,
            endTime:this.form.endTime
          };
          query = '?';
          for (let i in queryData) {
            query += `&${i}=${queryData[i]}`;
          }
        }
        form.query = query;
        if(this.form.minutes == 0){
          form.query = ''
        }
        this.$emit('submit', form);
        this.pending = true
        // this.dialogFormVisible = false;
      } catch (e) {
        console.error('err', e);
      }
    },
    // 获取日程详情
    async getAgendaInfo(agendaId){
      try {
        let res = await CalendarApi.getAgendaCalendarInfo({agendaId});
        if(res.status != 0) {
          return this.$platform.notification({
            title: res.message,
            type: 'error'
          });
        }
        this.form = res.data.agendaInfo;
        this.form.canAddUser = res.data.canAddUser;
        this.form.canDelUser = res.data.canDelUser;
        // this.form.startTime = this.agendaInfo.startTime
        // this.form.endTime = this.agendaInfo.endTime
        this.form.minutes = String(this.form.minutes)
        this.form.repeatType = String(this.form.repeatType)
        this.form.noticeType = String(this.form.noticeType || 1)
        this.form.users = res.data.users

        this.atUsers = atTextToUsers(this.form.noticeContent).users || []
        this.form.noticeContent = atTextToUsers(this.form.noticeContent).content || '';
      } catch (err) {
        console.error('err', err);
      }
    },
    /* 查询是否开启 降低组织架构的开关 */
    getSeeAllOrg() {
      return this.$http.post('/setting/user/getSeeAllOrg').then(result => { 
        return result
      })
    },
    selectChange(e){
      if(e > 0 && this.computeTime){
        this.$nextTick(()=>{
          this.form.repeatType = '0';
        })
        return this.$platform.alert(this.$t('calendar.limit.loopAgendaLimit', {num1: '24'}));
      }
    },
    inputContent(event){
      let value = event.target.value;
      this.form.noticeContent = value;
    },
  },
}
</script>
<style lang="scss"  >
.schedule-content{
 .vc-popover-content-wrapper {
      padding-bottom: 30px !important;
  }
  .vc-container .vc-container{
    border: 1px solid;
    border-color: var(--gray-400);
  }
  .vc-popover-content.direction-bottom{
    border: none;
  }
}
</style>
<style lang="scss" scoped>
.schedule-content{
  display: flex;
  height: 100%;
 
  .schedule-scroll-content{
    height: 100%;
    overflow-y: auto;
    >.el-form{
      width: 100%;
      height: 100%;
      padding-top: 5px;
      ::v-deep .el-input__inner {
        height: 32px;
        line-height: 32px;
        font-size: 14px;
      }
      ::v-deep .el-textarea__inner {
        font-size: 14px;
      }
    }
    >.users-time{
      width: 100%;
    }

    &:nth-child(1){
      flex: 1;
    }
    &:nth-child(2){
      flex: 1;
    }
    
  }
  
  .el-form {
    flex: 2;
    padding: 20px;
    border-right: 1px solid #eee;
    .no-left {
      ::v-deep .el-form-item__content{
        margin-left: 0!important;
      }
    }
    .user-tag {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      justify-content: flex-start;
      background-color: #fff;
      border-radius: 4px;
      border: 1px solid #e0e1e2;
      padding: 4px; 
      min-height: 38px;
      .btn-add-user {
        margin-right: 10px;
      }
      .el-tag{
        // min-height: 22px;
        // margin: 3px 4px;
        // padding: 1px 6px;
        // padding: 0 5px;
        // img {
        //   width: 24px;
        //   height: 24px;
        //   border-radius: 50%;
        //   object-fit: cover;
        // }

        width: 90px;
        min-height: 24px;
        padding: 1px 6px;
        display: flex;
        align-items: center;
        margin: 0 5px 3px 0;
        span {
          width: 50%;
          display: inline-block;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          line-height: 18px;
        }
      }
      img {
        width: 18px;
        height: 18px;
        border-radius: 50%;
        margin-right: 3px;
      }
      .placeholder {
        color: $text-color-secondary;
        font-size: 12px;
      }
    }
    .user-tag-tips {
      color: $color-warning;
    }
    .noti-time{
      margin-right: 15px;
    }
    .notice-type{
      display: flex;
      .el-select{
        flex: 1;
      }
    } 
  }
  
  .users-time{
    flex: 3;
    display: flex;
    flex-direction: column;
    .clash{
      display: flex;
      justify-content: space-around;
      height: 40px;
      line-height: 40px;
      padding: 0 10px;
      .clash-tip{
        min-width: 100px;
        .icon-yitongguo {
          color: #52C41A;
        }
        .icon-jinggao {
          color: #FF4D4F;
        }
      }
      .clash-right {
        flex: 1;
        display: flex;
        justify-content: flex-end;
      }
      .el-select{
        max-width: 150px;
        margin: 0 5px;
      }
      .work-state{
        max-width: 150px;
        ::v-deep .el-tag {
          display: flex;
          align-items: center;
          max-width: 65px;
          @include text-ellipsis();
          .el-select__tags-text {
            display: inline-block;
            max-width: 40px;
            @include text-ellipsis();
          }
          .el-tag__close.el-icon-close {
            right: -3px;
          }
        }
      }
      .bnt-add-user{
        padding: 0 15px;
        height: 32px;
        line-height: 32px;
        margin-top: 4px;
        margin-left: 5px;
        background: $color-primary-light-1 !important;
        border-radius: 3px;
        border: 1px solid rgba(0, 0, 0, 0.08);
        color: $color-primary-light-6 !important;
        &:hover {
          border-color: $color-primary-light-6 !important;
          background-color: $color-primary-light-6 !important;
          color: #fff !important
        }
      }
    }
    .type-desc {
      display: flex;
      align-items: center;
      padding: 5px 13px 0;
      .plane-type {
        width: 12px;
        height: 12px;
        background: #67C23A;
        opacity: 0.6;
        margin-right: 4px;
      }
      .plane-content {
        margin-right: 16px;
      }
      .time-text {
        height: 17px;
        font-size: 12px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #8C8C8C;
        line-height: 17px;
      }
      .busy-type {
        width: 12px;
        height: 12px;
        background: #FAAB0C;
        opacity: 0.35;
        margin-right: 4px;
      }
      .config-type {
        width: 12px;
        height: 12px;
        background: #82B830;
        margin-right: 4px;
      }
    }
    .el-table {
      flex: 1;
      height: calc(100vh - 196px);
      ::v-deep .el-table_1_column_1  {
        border-bottom: none!important;
      }
      ::v-deep td.is-hidden > *{
        visibility: visible!important;
      }
    }
  }
}
</style>

<style lang="scss">
.agenda-common {
  .layx-html {
    overflow-x: hidden!important;
    .base-window-content-body {
      overflow: hidden;
    }
  }
}
.schedule-work-state-item{
  display: flex;
  align-items: center;
  .state-color-icon{
    display: inline-block;
    border-radius: 50%;
    width: 10px;
    height: 10px;
    margin-right: 10px;
  }
}
.schedule-content{
  .el-col-1 {
    text-align: center;
  }
  .el-date-editor {
    .el-input__icon{
      width: 20px;
    }
    .el-input__inner{
      padding-left: 24px;
      padding-right: 0;
    }
  }
}
.time-select-item.selected:not(.disabled){
  color: $color-primary-light-6;
}
.disabled-tag {
  cursor: no-drop;
}
.button-new-tag {
  position: initial;
  height: 24px;
  // width: 90px;
  font-size: 12px;
  padding: 1px 6px !important;
  margin-bottom: 4px;
}
.container {
  position: relative;
}
.the-mask-box{
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  background-color: rgba(200,200,200,.9);
  z-index: 999;
  font-size: 20px;
  padding: 100px 0 50px;
  text-align: center;
}
</style>
